<template>
  <div class="app-container">
    <el-form
      :model="createClueForm"
      :rules="rules"
      ref="createClueForm"
      label-width="100px"
      label-position="top"
    >
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
        <div class="text item">
          <el-row :gutter="100">
            <el-col :span="8">
              <el-form-item label="校区" prop="orgId">
                <el-select
                  v-model="createClueForm.orgId"
                  @change="handleOrgChange(createClueForm.orgId)"
                  placeholder="请选择校区"
                  style="width:100%"
                >
                  <el-option
                    v-for="option in orgIdOptions"
                    :key="option.key"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="渠道" prop="channelIdList">
                <el-cascader
                  show-all-levels
                  clearable
                  placeholder="请选择渠道"
                  v-model="createClueForm.channelIdList"
                  style="width:100%"
                  :options="channelIdOptions"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="姓名" prop="customerName">
                <el-input v-model="createClueForm.customerName" placeholder="请输入客户姓名"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="8">
              <el-form-item label="年龄" prop="customerAge">
                <el-input v-model="createClueForm.customerAge" placeholder="请输入客户年龄"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="customerGender">
                <el-select
                  v-model="createClueForm.customerGender"
                  placeholder="请选择客户性别"
                  style="width:100%"
                >
                  <el-option label="男" value="M" />
                  <el-option label="女" value="F" />
                  <el-option label="未知" value="X" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电话" prop="customerPhone">
                <el-input v-model="createClueForm.customerPhone" placeholder="请选输入客户电话"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="24">
              <el-form-item label="备注" prop="customerRemark">
                <el-input
                  v-model="createClueForm.customerRemark"
                  type="textarea"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>咨询信息</span>
        </div>
        <div class="text item">
          <el-row :gutter="100">
            <el-col :span="24">
              <el-form-item label="咨询课程" prop="clueCourIdList">
                <el-select
                  multiple
                  v-model="createClueForm.clueCourIdList"
                  placeholder="请选择"
                  style="width:100%"
                >
                  <el-option-group
                    v-for="group in clueCourIdOptions"
                    :key="group.label"
                    :label="group.label"
                  >
                    <el-option
                      v-for="item in group.children"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>到访信息</span>
        </div>
        <div class="text item">
          <el-row :gutter="100">
            <el-col :span="8">
              <el-form-item label="承诺到访" prop="isPromiseVisit">
                <el-radio
                  v-model="createClueForm.isPromiseVisit"
                  label="0"
                  border
                  >未承诺到访</el-radio
                >
                <el-radio
                  v-model="createClueForm.isPromiseVisit"
                  label="1"
                  border
                  >承诺到访</el-radio
                >
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change'
                }"
                label="诺到访时间"
                prop="promiseVisitDate"
                v-if="this.createClueForm.isPromiseVisit == 1"
              >
                <el-date-picker
                  style="width:100%"
                  v-model="createClueForm.promiseVisitDate"
                  align="right"
                  type="date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  :picker-options="datePickerOptions"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="8">
              <el-form-item
                label="确定时间"
                prop="isSureVisit"
                v-if="this.createClueForm.isPromiseVisit == 1"
              >
                <el-radio v-model="createClueForm.isSureVisit" label="0" border
                  >未确定时间</el-radio
                >
                <el-radio v-model="createClueForm.isSureVisit" label="1" border
                  >确定时间</el-radio
                >
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change'
                }"
                label="诺到访时间"
                prop="sureVisitDate"
                v-if="
                  this.createClueForm.isSureVisit == 1 &&
                    this.createClueForm.isPromiseVisit == 1
                "
              >
                <el-time-picker
                  style="width:100%"
                  v-model="createClueForm.sureVisitDate"
                  placeholder="选择时间"
                  format="HH:mm:ss"
                  value-format="HH:mm:ss"
                ></el-time-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="8">
              <el-form-item label="是否到访" prop="isVisit">
                <el-radio v-model="createClueForm.isVisit" label="0" border
                  >否</el-radio
                >
                <el-radio v-model="createClueForm.isVisit" label="1" border
                  >是</el-radio
                >
              </el-form-item>
            </el-col>

            <el-col :span="8" v-if="this.createClueForm.isVisit == 1">
              <el-form-item
                :rules="{
                  required: true,
                  message: '请选择',
                  trigger: 'change'
                }"
                prop="visitTime"
                label="到访时间"
              >
                <el-date-picker
                  style="width:100%"
                  v-model="createClueForm.visitTime"
                  align="right"
                  type="datetime"
                  placeholder="选择日期"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="datePickerOptions"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="24">
              <el-form-item
                prop="noVisitReason"
                label="未到访原因"
                v-if="this.createClueForm.isVisit == 0"
              >
                <el-input
                  v-model="createClueForm.noVisitReason"
                  type="textarea"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card
        class="box-card"
        shadow="never"
        v-if="this.createClueForm.isVisit == 1"
      >
        <div slot="header" class="clearfix">
          <span>试听信息</span>
        </div>
        <div class="text item">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="是否试听" prop="isAudition">
                <el-radio v-model="createClueForm.isAudition" label="0" border
                  >未试听</el-radio
                >
                <el-radio v-model="createClueForm.isAudition" label="1" border
                  >已试听</el-radio
                >
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10" v-if="this.createClueForm.isAudition == 1">
            <el-col :span="6">
              <el-form-item
                v-for="(audition, index) in createClueForm.auditionList"
                :label="'试听课名称-' + (index + 1)"
                :key="audition.key"
                :prop="'auditionList.' + index + '.courseId'"
                :rules="{
                  required: true,
                  message: '请选择试听课程',
                  trigger: 'change'
                }"
              >
                <el-select
                  v-model="audition.courseId"
                  @change="getCity(audition)"
                  placeholder="请选择"
                  style="width:100%"
                  clearable
                >
                  <el-option-group
                    v-for="group in clueCourIdOptions"
                    :key="group.label"
                    :label="group.label"
                  >
                    <el-option
                      v-for="item in group.children"
                      v-show="isSelect(item.value, audition.courseId)"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                v-for="(audition, index) in createClueForm.auditionList"
                :label="'试听课老师-' + (index + 1)"
                :key="audition.key"
                :prop="'auditionList.' + index + '.teacherId'"
                :rules="{
                  required: true,
                  message: '请选择听课老师',
                  trigger: 'change'
                }"
              >
                <el-select
                  clearable
                  v-model="audition.teacherId"
                  placeholder="请选择"
                  style="width:100%"
                >
                  <el-option
                    v-for="option in teacherOptionGroups[index]"
                    :key="option.key"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                v-for="(audition, index) in createClueForm.auditionList"
                :label="'试听时间-' + (index + 1)"
                :key="audition.key"
                :prop="'auditionList.' + index + '.courseTime'"
                :rules="{
                  required: true,
                  message: '请选择试听时间',
                  trigger: 'change'
                }"
              >
                <el-date-picker
                  style="width:100%"
                  v-model="audition.courseTime"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :picker-options="datePickerOptions"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                v-for="audition in createClueForm.auditionList"
                :label="'操作'"
                :key="audition.key"
              >
                <el-button @click.prevent="removeAudition(audition)"
                  >删除</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-button
            @click="addAudition"
            v-if="this.createClueForm.isAudition == 1"
            >新增试听课程</el-button
          >
        </div>
      </el-card>

      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>报名信息</span>
        </div>
        <div class="text item">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item
                label="是否报名"
                prop="isEnroll"
                :xs="8"
                :sm="6"
                :md="4"
                :lg="3"
                :xl="1"
              >
                <el-radio v-model="createClueForm.isEnroll" label="0" border
                  >否</el-radio
                >
                <el-radio v-model="createClueForm.isEnroll" label="1" border
                  >是</el-radio
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="24">
              <el-form-item
                v-if="this.createClueForm.isEnroll == 0"
                label="未报名原因"
                prop="noEnrollReasonRemark"
              >
                <el-input
                  type="textarea"
                  v-model="createClueForm.noEnrollReasonRemark"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="10" v-if="this.createClueForm.isEnroll == 1">
            <el-col :span="3">
              <el-form-item
                v-for="(enrollCourse, index) in createClueForm.enrollCourseList"
                :label="'报名课程-' + (index + 1)"
                :key="enrollCourse.key"
                :prop="'enrollCourseList.' + index + '.courseId'"
                :rules="{
                  required: true,
                  message: '请选择报名课程',
                  trigger: 'change'
                }"
              >
                <el-select
                  v-model="enrollCourse.courseId"
                  placeholder="请选择"
                  style="width:100%"
                  clearable
                >
                  <el-option-group
                    v-for="group in clueCourIdOptions"
                    :key="group.label"
                    :label="group.label"
                  >
                    <el-option
                      v-for="item in group.children"
                      v-show="isSelectTwo(item.value, enrollCourse.courseId)"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-option-group>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item
                v-for="(enrollCourse, index) in createClueForm.enrollCourseList"
                :label="'报名时间-' + (index + 1)"
                :key="enrollCourse.key"
                :prop="'enrollCourseList.' + index + '.enrollTime'"
                :rules="{
                  required: true,
                  message: '请选择报名时间',
                  trigger: 'change'
                }"
              >
                <el-date-picker
                  style="width:100%"
                  v-model="enrollCourse.enrollTime"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  :picker-options="datePickerOptions"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item
                v-for="(enrollCourse, index) in createClueForm.enrollCourseList"
                :label="'报名金额-' + (index + 1)"
                :key="enrollCourse.key"
                :prop="'enrollCourseList.' + index + '.enrolPrice'"
                :rules="{
                  required: true,
                  message: '请填写报名金额',
                  trigger: 'blur'
                }"
              >
                <el-input
                  v-model="enrollCourse.enrolPrice"
                  type="number"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item
                v-for="(enrollCourse, index) in createClueForm.enrollCourseList"
                :label="'材料费-' + (index + 1)"
                :key="enrollCourse.key"
                :prop="'enrollCourseList.' + index + '.materialCost'"
                :rules="{
                  required: true,
                  message: '请填写材料费',
                  trigger: 'blur'
                }"
              >
                <el-input
                  v-model="enrollCourse.materialCost"
                  type="number"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item
                v-for="(enrollCourse, index) in createClueForm.enrollCourseList"
                :label="'课时-' + (index + 1)"
                :key="enrollCourse.key"
                :prop="'enrollCourseList.' + index + '.courseTime'"
                :rules="{
                  required: true,
                  message: '请填写课时',
                  trigger: 'blur'
                }"
              >
                <el-input
                  v-model="enrollCourse.courseTime"
                  type="number"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item
                v-for="(enrollCourse, index) in createClueForm.enrollCourseList"
                :label="'赠送课时-' + (index + 1)"
                :key="enrollCourse.key"
                :prop="'enrollCourseList.' + index + '.extraCourseTime'"
                :rules="{
                  required: true,
                  message: '请填写赠送课时',
                  trigger: 'blur'
                }"
              >
                <el-input
                  v-model="enrollCourse.extraCourseTime"
                  type="number"
                ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="3">
              <el-form-item
                v-for="enrollCourse in createClueForm.enrollCourseList"
                :label="'操作'"
                :key="enrollCourse.key"
              >
                <el-button @click.prevent="removeEnrollCourse(enrollCourse)"
                  >删除</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
          <el-button
            @click="addEnrollCourse"
            v-if="this.createClueForm.isEnroll == 1"
            >新增报名课程</el-button
          >
        </div>
      </el-card>
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>跟进信息</span>
        </div>
        <div class="text item">
          <el-row :gutter="100">
            <el-col :span="8">
              <el-form-item label="分配咨询师" prop="ownerId">
                <el-select
                  clearable
                  v-model="createClueForm.ownerId"
                  placeholder="请选择"
                  style="width:100%"
                >
                  <el-option
                    v-for="option in ownerIdOptions"
                    :key="option.key"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="下次跟进时间(提醒咨询师跟进时间)"
                prop="nextFollowTime"
              >
                <el-date-picker
                  style="width:100%"
                  v-model="createClueForm.nextFollowTime"
                  align="right"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  :picker-options="nextFollowTimePickerOptions"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-form-item>
        <el-button
          :loading="submitLoading"
          type="primary"
          @click="submitForm('createClueForm')"
          >提交</el-button
        >
        <el-button @click="resetForm('createClueForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  //渠道信息
  fetchOrg,
  fetchChannel,
  fetchCourse,
  fetchTeahcer,
  fetchOwner,
  createClue

  //课程信息
  //老师信息
  //咨询师
} from "@/api/clue";
import waves from "@/directive/waves"; // 水波纹指令
import { parseTime } from "@/utils";

export default {
  name: "Dashboard",
  data() {
    return {
      isShow: true,
      submitLoading: false,
      channelIdOptions: [],
      orgIdOptions: [],
      teacherOptions: [],
      clueCourIdOptions: [],
      clueCourIdOptionGroups: [],
      teacherOptionGroups: [],
      datePickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },

      ownerIdOptions: [],
      nextFollowTimePickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
        shortcuts: [
          {
            text: "明天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周后",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },

      createClueForm: {
        //数据模型

        //渠道id
        channelId: "",
        channelIdList: [],

        //线索客户姓名
        customerName: "",

        //线索客户年龄
        customerAge: "",

        //线索客户性别
        customerGender: "",

        //线索客户电话
        customerPhone: "",

        //线索备注
        customerRemark: "",

        //承诺到访状态 0:否；1:是
        isPromiseVisit: "0",

        //承诺到访日期
        promiseVisitDate: "",

        //确定到访状态 0:否；1:是
        isSureVisit: "0",

        //确定到访时间
        sureVisitDate: "",

        //是否到访状态 0:否；1:是
        isVisit: "0",

        //未到访原因
        noVisitReason: "",

        //到访时间
        visitTime: "",

        //是否试听状态 0:否；1:是
        isAudition: "0",

        //是否报名状态 0:否；1:是
        isEnroll: "0",

        //未报名原因
        noEnrollReason: "",

        //下次跟进日期
        nextFollowTime: "",

        //线索创建后分配到哪个用户名下
        ownerId: "",

        //最后跟进时间
        lastFollowTime: "",

        //备注
        remark: "",

        //2.咨询信息
        clueCourIdList: [],

        //4.试听信息
        auditionList: [],
        //5.报名信息
        enrollCourseList: []
      },
      rules: {
        customerName: [
          { required: true, message: "请输入客户姓名", trigger: "blur" }
        ],
        customerGender: [
          { required: true, message: "请选择客户性别", trigger: "change" }
        ],
        customerPhone: [
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            required: true,
            message: "请输入正确的手机号",
            trigger: "blur"
          },
          {
            min: 11,
            max: 11,
            message: "长度在 11 到 11 个字符",
            trigger: "blur"
          }
        ],

        channelIdList: [
          {
            type: "array",
            required: true,
            message: "请选择渠道",
            trigger: "change"
          }
        ],

        orgId: [{ required: true, message: "请选择校区", trigger: "change" }],
        //      promiseVisitDate: [
        //        {
        //          type: "date",
        //          required: true,
        //          message: "请选择诺到访日期",
        //          trigger: "change"
        //        }
        //      ],
        //      sureVisitDate: [
        //        {
        //          type: "date",
        //          required: true,
        //          message: "请选择诺到访时间",
        //          trigger: "change"
        //        }
        //      ],
        //      visitTime: [
        //        {
        //          type: "date",
        //          required: true,
        //          message: "请选择到访时间",
        //          trigger: "change"
        //        }
        //      ],
        clueCourIdList: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个课程",
            trigger: "change"
          }
        ],
        ownerId: [
          {
            required: true,
            message: "请选择咨询师",
            trigger: "change"
          }
        ]
      }
    };
  },
  created() {
    this.getOrgIdOptions();
    //this.getChannelOptios();
    //this.clueCourIdOptionGroups.push(this.clueCourIdOptions);
    //this.teacherOptionGroups.push(this.teacherOptions);
  },
  watch: {
    // "createClueForm.orgId": {
    //   handler(newOrgId, oldOrgId) {
    //     //当学校的值发生变化时，需要做几个操作
    //     //1、重新渲染渠道下拉框，并将数据模型里的渠道id置空
    //     //2、重新渲染所有课程下拉框，并将数据模型里的所有课程id置空
    //     //3、清空所有老师的下拉框，并将所有老师Id都置空
    //     //4、重新渲染咨询师下拉框，并将数据模型里的咨询师id置空
    //   },
    //   deep: true,
    //   immediate: true
    // },
    // "createClueForm.auditionList": {
    //   handler(newOrgId, oldOrgId) {
    //     console.table(newOrgId);
    //     //alert(newOrgId.courseId);
    //     //当学校的值发生变化时，需要做几个操作
    //     //1、重新渲染渠道下拉框，并将数据模型里的渠道id置空
    //     //2、重新渲染所有课程下拉框，并将数据模型里的所有课程id置空
    //     //3、清空所有老师的下拉框，并将所有老师Id都置空
    //     //4、重新渲染咨询师下拉框，并将数据模型里的咨询师id置空
    //   },
    //   deep: true,
    //   immediate: true
    // },
    "createClueForm.isAudition": {
      handler(newIsAudition, oldIsAudition) {
        if (newIsAudition == 1) {
          if (this.createClueForm.auditionList.length == 0) {
            this.addAudition();
          }
        }
      },
      deep: true,
      immediate: true
    },
    "createClueForm.isEnroll": {
      handler(newIsEnroll, oldIsEnroll) {
        if (newIsEnroll == 1) {
          if (this.createClueForm.enrollCourseList.length == 0) {
            this.addEnrollCourse();
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    //获取所有校区()
    getOrgIdOptions() {
      const queryMethod = "queryClueOrStatistic";
      fetchOrg(queryMethod).then(response => {
        this.orgIdOptions = response.data;
      });
    },
    //根据校区获取所有渠道(校区ID)
    getChannelOptions(orgId) {
      fetchChannel(orgId).then(response => {
        this.channelIdOptions = response.data;
      });
    },
    //课程（校区Id）
    getCourseOptions(orgId) {
      fetchCourse(orgId).then(response => {
        this.clueCourIdOptions = response.data;
      });
    },
    //老师(课程ID,校区ID)
    getTeahcerOptions(courseId, orgId) {
      fetchTeahcer(courseId, orgId).then(response => {
        this.teacherOptions = response.data;
      });
    },
    //咨询师(校区ID)
    getOwnerOptions(orgId) {
      fetchOwner(orgId).then(response => {
        this.ownerIdOptions = response.data;
      });
    },
    handleOrgChange(orgId) {
      //alert(orgId)

      //当学校的值发生变化时，需要做几个操作
      //1、重新渲染渠道下拉框，并将数据模型里的渠道id置空
      this.getChannelOptions(orgId);
      if (this.createClueForm.channelIdList.length > 0) {
        this.createClueForm.channelIdList = [];
      }

      //2、重新渲染所有课程下拉框，并将数据模型里的所有课程id置空
      this.getCourseOptions(orgId);
      if (this.createClueForm.clueCourIdList.length > 0) {
        this.createClueForm.clueCourIdList = [];
      }

      //清空听课列表里的所有课程、老师

      //3、清空所有老师的下拉框，并将所有老师Id都置空

      for (var i = 0; i < this.createClueForm.auditionList.length; i++) {
        if (this.createClueForm.auditionList[i].courseId) {
          this.createClueForm.auditionList[i].courseId = "";
        }
        if (this.createClueForm.auditionList[i].teacherId) {
          this.createClueForm.auditionList[i].teacherId = "";
        }
      }
      //清空所有老师下拉框的数据项
      this.teacherOptionGroups.splice(0, this.teacherOptionGroups.length);

      //清空报名列表里的所有课程
      for (var i = 0; i < this.createClueForm.enrollCourseList.length; i++) {
        if (this.createClueForm.enrollCourseList[i].courseId) {
          this.createClueForm.enrollCourseList[i].courseId = "";
        }
      }

      //4、重新渲染咨询师下拉框，并将数据模型里的咨询师id置空
      this.getOwnerOptions(this.createClueForm.orgId);
      this.createClueForm.ownerId = "";
    },

    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.submitLoading = true;
          createClue(this.createClueForm)
            .then(() => {
              this.submitLoading = false;
              this.$confirm("新增线索成功", "提示", {
                confirmButtonText: "继续录入",
                cancelButtonText: "查看列表",
                type: "success"
              })
                .then(() => {
                  this.resetForm('createClueForm');
                })
                .catch(() => {
                  this.$router.push({
                    path: "/business/followUpClueTable"
                  });
                });
            })
            .catch(err => {
              this.submitLoading = false;
            });
        } else {
          this.$message({
            message: "请正确输入所有必填的信息!",
            type: "warning"
          });
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    removeAudition(item) {
      var index = this.createClueForm.auditionList.indexOf(item);
      if (index !== -1) {
        this.createClueForm.auditionList.splice(index, 1);
      }
      if (this.createClueForm.auditionList.length == 0) {
        this.createClueForm.isAudition = "0";
      }
    },
    addAudition() {
      this.createClueForm.auditionList.push({
        key: Date.now()
      });
    },
    removeEnrollCourse(item) {
      var index = this.createClueForm.enrollCourseList.indexOf(item);
      if (index !== -1) {
        this.createClueForm.enrollCourseList.splice(index, 1);
      }
      if (this.createClueForm.enrollCourseList.length == 0) {
        this.createClueForm.isEnroll = "0";
      }
    },
    addEnrollCourse() {
      this.createClueForm.enrollCourseList.push({
        key: Date.now()
      });
    },
    getCity: function(audition) {
      var index = this.createClueForm.auditionList.indexOf(audition);
      //根据课程id去查询老师
      //console.table(audition)
      fetchTeahcer(audition.courseId, this.createClueForm.orgId).then(
        response => {
          //this.teacherOptions = response.data;
          this.teacherOptionGroups.splice(index, 1, response.data);
        }
      );

      //audition.teacherId = null;
      if (audition.teacherId) {
        audition.teacherId = "";
      }
    },
    isSelect(id, currentId) {
      if (currentId === id) {
        return true;
      }
      for (let i in this.createClueForm.auditionList) {
        debugger;
        if (this.createClueForm.auditionList[i].courseId === id) {
          return false;
        }
      }
      return true;
    },
    isSelectTwo(id, currentId) {
      if (currentId === id) {
        return true;
      }
      for (let i in this.createClueForm.enrollCourseList) {
        debugger;
        if (this.createClueForm.enrollCourseList[i].courseId === id) {
          return false;
        }
      }
      return true;
    }
  }
};
</script>
<style scoped>
.app-container {
  background-color: #f3f3f3;
}
.box-card {
  margin-bottom: 20px;
}
/*-.el-card__header{
  padding:10px 8px;
  font-size: 16px;;
  color: #606266;
}*/
</style>
